<template>
  <GlobalFooter :links="links">
    <template #links>
      <div class="footer-links">
        <Link v-for="item in links" :to="item.href" :title="item.title" :target="item.blankTarget ? '_blank' : ''"
              :key="item.key">
          <m-icon v-if="item.icon" :name="item.icon"></m-icon>
        </Link>
      </div>
    </template>
    <template #copyright>
      <div>
        MIT License | Copyright (c) 2024 会功夫的李白 |
        <span style="cursor: pointer" @click="onShowAbout">关于</span>
      </div>
    </template>
  </GlobalFooter>
  <Modal
    v-model="aboutShow"
    title="关于"
    @on-ok="aboutShow = false"
    footer-hide>
    <div class="about-box">
      <div class="logo">
        <img :src="require('@/assets/simnple_tool_icon.png')">
        Simple Tools
      </div>
      <p>邮箱：jl15988@qq.com</p>
      <p>开发者：会功夫的李白</p>
      <p>创建时间：2024-02-28</p>
      <p>因为热爱，所以存在！</p>
      <p>当前网站正在努力成长中，欢迎帮助我们完善它！欢迎联系投稿！</p>
    </div>
  </Modal>
</template>

<script>
import MIcon from "@/components/MIcon";

export default {
  name: "AboutComponent",
  components: {MIcon},
  data() {
    return {
      aboutShow: false,
      links: [{
        key: 'github',
        title: 'github',
        icon: 'github',
        href: 'https://github.com/jl15988',
        blankTarget: true
      }, {
        key: 'gitee',
        title: 'gitee',
        icon: 'gitee',
        href: 'https://gitee.com/jl15988',
        blankTarget: true
      }, {
        key: 'csdn',
        title: 'csdn',
        icon: 'csdn',
        href: 'https://blog.csdn.net/jl15988',
        blankTarget: true
      }],
    }
  },
  methods: {
    onShowAbout() {
      this.aboutShow = true;
    }
  },
}
</script>

<style lang="scss" scoped>

.about-box {
  font-size: 16px;
  padding: 0 10px;
  line-height: 1.8em;
  text-align: center;

  .logo {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    font-weight: bold;
    margin-bottom: 20px;
    white-space: nowrap;
    flex-wrap: nowrap;
  }

  img {
    width: 46px;
    margin-right: 10px;
  }
}

.footer-links {
  display: flex;
  justify-content: center;

  .symbol-icon {
    width: 20px;
    height: 20px;
  }
}

</style>
